<template>
  <div class="content-box">
    <!-- <van-nav-bar
      style="background-color: #f8f8f8;"
      title="我的社保卡"
    /> -->
    <div style="font-size: 16px; margin: 10px 10px 0 10px;">
      <div class="text-box">
        <van-form>
          <article class="form-card" v-for="(item, index) in myCardData" :key="index">
            <!-- <div class="num-box">
              <van-field
                readonly
                clickable
                placeholder="选择社保号码"
                :value="value"
                name="社保卡号码"
                label="社保卡号码"
                :colon="true"
                input-align="right"
                @click="showPicker = true"
              />
              <span class="arrow"></span>
            </div> -->
            <van-cell-group>
              <van-cell title="姓名：" :value="item.aac003" />
              <van-cell title="社会保障号：" :value="item.aac002" />
              <van-cell title="参保地：" :value="item.aab301Name" />
              <van-cell title="证件类型：" :value="item.aaz508" />
              <van-cell title="社保卡状态：" :value="item.aaz502" />
              <van-cell title="是否可挂失：" :value="item.isLoss" />
            </van-cell-group>
          </article>
          <div style="margin: 16px;">
            <van-button
              block
              @click="$router.go(-1)"
              type="info"
            ><span style="letter-space: 3px;">返 回</span></van-button>
          </div>
        </van-form>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchCard',
  data () {
    return {
      value: '',
      columns: ['440111195901180328'],
      showPicker: false,
      name: '刘小小',
      certificates: '社保卡',
      mobileNum: '13653094523',
      idNum: '440223199652455541',
      cardType: '三代社保卡',
      cardStatus: '正常',
      isLose: '可挂失',
      myCardData: []
    }
  },
  methods: {
    searchMyCard () {
      this.$http.post('getCardInfoQuery', {
        aac003: '李燕好', // 姓名
        aac058: '01', // 证件类型
        aac147: '440111195901180328', // 证件号码（不一定是身份证）
        aac161: 'CHN' // 国家地区
      }, { 'Content-Type': 'application/json' }
      ).then(res => {
        // this.$router.push('/detailPage')
        // aaz502 卡状态：0封存 1正常 2正式挂失 3锁定 9注销 A临时挂失
        // isLoss 是否可挂失 0可挂失 1不可挂失
        res.data.forEach(value => {
          // 卡状态转换
          if (value.aaz502 === '0') {
            value.aaz502 = '封存'
          } else if (value.aaz502 === '1') {
            value.aaz502 = '正常'
          } else if (value.aaz502 === '2') {
            value.aaz502 = '正式挂失'
          } else if (value.aaz502 === '9') {
            value.aaz502 = '注销'
          } else if (value.aaz502 === 'A') {
            value.aaz502 = '临时挂失'
          }
          // 是否可挂失转换
          if (value.isLoss === '0') {
            value.isLoss = '可挂失'
          } else {
            value.isLoss = '不可挂失'
          }
          // 卡类型转换
          if (value.aaz508 === '1.00') {
            value.aaz508 = '一代社保卡'
          } else if (value.aaz508 === '2.00') {
            value.aaz508 = '二代社保卡'
          } else if (value.aaz508 === '3.00') {
            value.aaz508 = '三代社保卡'
          } else {
            value.aaz508 = '其它'
          }
        })
        this.myCardData = res.data
        this.myCardData.push(res.data[0])
      })
        .catch(error => {
          console.log(error)
        })
    },
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    onClickLeft () {
      console.log('neiogn')
    }
  },
  mounted () {
    this.searchMyCard()
  }
}
</script>

<style lang="less" scoped>
.content-box{
  // background-color: red;
  min-height: 100vh;
  background-color: #f8f8f8;
  .text-box{
    margin-top: 10px;
    .form-card{
      margin-top: 15px;
      & /deep/ .van-cell__value{
        color: #000;
      }
      & /deep/ .van-cell__title{
        color: #969799;
      }
      & /deep/ .van-cell{
        color: #969799;
      }
    }
  }
  .num-box{
    position: relative;
    .arrow{
      position: absolute;
      top: 45%;
      right: 1%;
      display: inline-block;
      width: 0;
      height: 0;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-top: 5px solid #1769ff;
    }
  }
}
</style>
